<template>
  <div class="register themebgcolor" ref="main">
   <mt-header title="注册" fixed>
  <router-link to="/login" slot="left">
    <mt-button icon="back"></mt-button>
  </router-link>
</mt-header>
<div class="imgbg"></div>
<div class="reg_content">
<form>
<div>
  <input type="text" placeholder="请输入手机号" v-model="mobilephone">  
</div>
  <div class="reg_yzm">
    <input type="text" placeholder="请输入验证码" v-model="code">
    <span class="getyzm" v-if="getflag" @click="getyzm(mobilephone)">验证码</span>
    <span class="stopyzm" v-if="getflag==false">{{time}}s</span>
  </div>
<div>
  <input type="password"  @focus="focus" @blur="blur" placeholder="请输入密码" v-model="pwd"><br>  
</div>
<div>
  <input type="text"  @focus="focus" @blur="blur" placeholder="请输入邀请码" v-model="inviteCode"><br>  
</div>
</form>
</div>
<div class="reg_userxy">
 <input type="checkbox" v-model="checkbox" />同意<router-link to="/useragreement">《用户使用协议》</router-link><br>  
</div>
  <div class="reg_btnbg">
    <button type="submit" class="themebtn1" @click="doRegister(mobilephone&&code&&pwd&&checkbox&&inviteCode)" :class="{reg_btn:mobilephone&&code&&pwd&&checkbox&&inviteCode}">注册</button>
  </div>
  </div>
</template>
<script>
import { Header, Toast } from "mint-ui";
import { register, sendRegisterCode } from "../api/api.js";
export default {
  name: "Register",
  data() {
    return {
      msg: "",
      mobilephone: "",
      pwd: "",
	  code: "",
	  inviteCode:"",
      getflag: true,
      time: 60,
      checkbox: true,
      viewHeight:""
    };
  },
  methods: {
     blur() {
      this.$refs.main.style.height = "100%";
    },
    focus() {
      this.$refs.main.style.height = this.viewHeight + "px";
    },
    doRegister(v) {
      var regx=/^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{8,20}$/;
      if (this.mobilephone == "") {
        Toast({
          message: "请输入手机号",
          position: "bottom",
          duration: 5000
        });
      } else if (this.code == "") {
        Toast({
          message: "请输入验证码",
          position: "bottom",
          duration: 5000
        });
      } else if (this.pwd=='') {
        Toast({
          message: "请输入密码",
          position: "bottom",
          duration: 5000
        });
      }else if(this.pwd.match(regx)==null){
      Toast({
          message: "密码必须由8-20位字母和数字组成",
          position: "bottom",
          duration: 5000
        });
      } else if (this.checkbox == false) {
        Toast({
          message: "请同意协议",
          position: "bottom",
          duration: 5000
        });
      } else if (v) {
        let para = {
          mobilephone: this.mobilephone,
          pwd: this.pwd,
		  code: this.code,
		  inviteCode:this.inviteCode
        };
        
        this.$ajaxPost("register", para).then(res => {
            Toast({
              message: res.msg,
              position: "bottom",
              duration: 5000
            });
            if (res.code == 200) {
				Toast({
					message: "注册成功",
					position: "bottom",
					duration: 5000
				});
              	this.$router.back();
            }
        });
      } else {
        Toast({
          message: "请输入完整信息",
          position: "bottom",
          duration: 5000
        });
      }
    },
    getyzm(x) {
      if (x) {
        let para = {
          mobilephone: this.mobilephone
        };
        sendRegisterCode(para)
          .then(res => {
            Toast({
              message: res.msg,
              position: "bottom",
              duration: 5000
            });
            if (res.code == 200) {
              this.getflag = false;
              var that = this;
              var timer = setInterval(function() {
                that.time--;
                if (that.time <= 0) {
                  clearInterval(timer);
                  that.getflag = true;
                  that.time = 60;
                }
              }, 1000);
            }
          })
          .catch(err => {
            Toast({
              message: "请求超时",
              position: "bottom",
              duration: 5000
            });
          });
      } else {
        Toast({
          message: "请先填写手机号",
          position: "bottom",
          duration: 3000
        });
      }
    }
  },
  mounted() {
    this.viewHeight = window.innerHeight;
  }
};
</script>
<style lang="less" scoped>
@import url('../../static/css/theme.less');
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import url("../../static/css/register.css");
</style>
